import React from 'react';
import {
  withRouter,
  Redirect,
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
} from 'react-router-dom';
import {inject,observer} from 'mobx-react';
import {Layout, Avatar, Dropdown, Alert} from 'antd';
import Routes from '../common/Routes';
import Menu from './Ui/Menu';
import UserMenu from './Ui/UserMenu/UserMenu';
import Logo from '../imgs/logo.png';


import '../css/pages/Layout.css';

const {Header, Sider, Content} = Layout;

@inject ('store')
@withRouter
@observer
export default class MyLayout extends React.Component {
  renderAuthAlert = userInfo => {
    if (!userInfo.auth || !userInfo.auth.type) {
      return (
        <Alert
          message={<span>您尚未进行账号认证，部分功能暂时关闭。请尽快进行账号认证。<Link to="/home/identify">需要帮助？</Link></span>}
          type="error"
          banner
          showIcon
          closable
        />
      );
    }
    return null;
  };
  render () {
    const {login, userInfo} = this.props.store.loginStatus;
    const {location} = this.props;
    if (!login) {
      return <Redirect to={{
        pathname: '/login',
        state: {from: location.pathname}
      }} />;
    }

    return (
      <Router>
        <Layout className="page-layout">
          <Sider breakpoint="lg" collapsedWidth="0">
            <a href="/home/index" className="page-logo">
              <img src={Logo} alt="logo" />
            </a>
            <Menu />
          </Sider>
          <Layout>
            <Header className="page-layout-header">
              <div className="right-block">
                <Dropdown
                  trigger={['hover']}
                  overlay={<UserMenu />}
                  // content={<UserMenu />}
                  overlayClassName="user-pop"
                >
                  <a className="user-wrapper">
                    <Avatar icon="user" />
                    <span className="name">
                      {userInfo.username || '总有刁民想害朕'}
                    </span>
                  </a>
                </Dropdown>
              </div>
            </Header>
            <Content className="page-layout-main">
              {this.renderAuthAlert(userInfo)}
              <Switch>
                {Routes.map ((v, index) => {
                  if (v.children) {
                    return v.children.map ((inV, inIndex) => (
                      <Route
                        exact
                        key={inV.path}
                        path={inV.path}
                        component={inV.component}
                      />
                    ));
                  }
                  return (
                    <Route
                      exact
                      key={v.path}
                      path={v.path}
                      component={v.component}
                    />
                  );
                })}
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </Router>
    );
  }
}
